

/* 基础 Flex 类 */
.fl {
  display: flex;
}

/* align-items (交叉轴对齐) */
.fl-ai-start {
  display: flex;
  align-items: flex-start;
}

.fl-ai-end {
  display: flex;
  align-items: flex-end;
}

.fl-ai-center {
  display: flex;
  align-items: center;
}

.fl-ai-baseline {
  display: flex;
  align-items: baseline;
}

.fl-ai-stretch {
  display: flex;
  align-items: stretch;
}

/* justify-content (主轴对齐) */
.fl-jc-start {
  display: flex;
  justify-content: flex-start;
}

.fl-jc-end {
  display: flex;
  justify-content: flex-end;
}

.fl-jc-center {
  display: flex;
  justify-content: center;
}

.fl-jc-between {
  display: flex;
  justify-content: space-between;
}

.fl-jc-around {
  display: flex;
  justify-content: space-around;
}

.fl-jc-evenly {
  display: flex;
  justify-content: space-evenly;
}

/* flex-direction (排列方向) */
.fl-dir-row {
  display: flex;
  flex-direction: row;
}

.fl-dir-row-reverse {
  display: flex;
  flex-direction: row-reverse;
}

.fl-dir-column {
  display: flex;
  flex-direction: column;
}

.fl-dir-column-reverse {
  display: flex;
  flex-direction: column-reverse;
}

/* flex-wrap (换行) */
.fl-wrap-nowrap {
  display: flex;
  flex-wrap: nowrap;
}

.fl-wrap-wrap {
  display: flex;
  flex-wrap: wrap;
}

.fl-wrap-reverse {
  display: flex;
  flex-wrap: wrap-reverse;
}

/* align-content (多行对齐) */
.fl-ac-start {
  display: flex;
  align-content: flex-start;
}

.fl-ac-end {
  display: flex;
  align-content: flex-end;
}

.fl-ac-center {
  display: flex;
  align-content: center;
}

.fl-ac-between {
  display: flex;
  align-content: space-between;
}

.fl-ac-around {
  display: flex;
  align-content: space-around;
}

.fl-ac-stretch {
  display: flex;
  align-content: stretch;
}

/* gap (项目间距) */
.fl-gap-0 {
  display: flex;
  gap: 0;
}

.fl-gap-4 {
  display: flex;
  gap: 4px;
}

.fl-gap-8 {
  display: flex;
  gap: 8px;
}

.fl-gap-12 {
  display: flex;
  gap: 12px;
}

.fl-gap-16 {
  display: flex;
  gap: 16px;
}

.fl-gap-20 {
  display: flex;
  gap: 20px;
}

/* flex 项目属性 */
.fl-1 {
  flex: 1;
}

.fl-auto {
  flex: auto;
}

.fl-none {
  flex: none;
}

.fl-grow-0 {
  flex-grow: 0;
}

.fl-grow-1 {
  flex-grow: 1;
}

.fl-shrink-0 {
  flex-shrink: 0;
}

.fl-shrink-1 {
  flex-shrink: 1;
}

.fl-basis-auto {
  flex-basis: auto;
}

.fl-basis-0 {
  flex-basis: 0;
}

/* 对齐单个项目 */
.fl-self-auto {
  align-self: auto;
}

.fl-self-start {
  align-self: flex-start;
}

.fl-self-end {
  align-self: flex-end;
}

.fl-self-center {
  align-self: center;
}

.fl-self-baseline {
  align-self: baseline;
}

.fl-self-stretch {
  align-self: stretch;
}
